<div>
    <div class="row"  class="label-config">
        <div>
            <div class="row flex-items-xs-between rightPos">
                <div class="flex-items-xs-middle option-right">
                    <hbr-filter [withDivider]="true" filterPlaceholder='{{"LABEL.FILTER_LABEL_PLACEHOLDER" | translate}}' (filterEvt)="doSearchTargets($event)" [currentValue]="targetName"></hbr-filter>
                    <span class="refresh-btn" (click)="refreshTargets()">
                        <clr-icon shape="refresh"></clr-icon>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 btnGroup">
            <button type="button" class="btn  btn-secondary" [disabled]="!hasCreateLabelPermission" (click)="openModal()"><clr-icon shape="plus" size="16"></clr-icon>&nbsp;{{'LABEL.NEW_LABEL' | translate}}</button>
            <button type="button" class="btn  btn-secondary" [disabled]="!(selectedRow.length == 1) || !hasUpdateLabelPermission" (click)="editLabel(selectedRow)"><clr-icon shape="pencil" size="16"></clr-icon>&nbsp;{{'LABEL.EDIT' | translate}}</button>
            <button type="button" class="btn  btn-secondary" [disabled]="!selectedRow.length || !hasDeleteLabelPermission" (click)="deleteLabels(selectedRow)"><clr-icon shape="times" size="16"></clr-icon>&nbsp;{{'LABEL.DELETE' | translate}}</button>
            <hbr-create-edit-label [scope]="scope"  [projectId]="projectId" (reload)="reload()"></hbr-create-edit-label>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <clr-datagrid [clrDgLoading]="loading"  [(clrDgSelected)]="selectedRow" (clrDgSelectedChange)="selectedChange()">
                <clr-dg-column [clrDgField]="'name'">{{'LABEL.LABEL' | translate}}</clr-dg-column>
                <clr-dg-column [clrDgField]="'description'">{{'LABEL.DESCRIPTION' | translate}}</clr-dg-column>
                <clr-dg-column [clrDgSortBy]="'creation_time'">{{'LABEL.CREATION_TIME' | translate }}</clr-dg-column>
                 <clr-dg-placeholder>{{'LABEL.PLACEHOLDER' | translate }}</clr-dg-placeholder>
                <clr-dg-row *clrDgItems="let label of targets" [clrDgItem]='label'>
                    <clr-dg-cell>
                        <hbr-label-piece [label]="label"></hbr-label-piece>
                    </clr-dg-cell>
                    <clr-dg-cell>{{label.description}}</clr-dg-cell>
                    <clr-dg-cell>{{label.creation_time | date: 'short'}}</clr-dg-cell>
                </clr-dg-row>
                <clr-dg-footer>
                    <span *ngIf="pagination.totalItems">{{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'DESTINATION.OF' | translate}}</span>
                    {{pagination.totalItems}} {{'DESTINATION.ITEMS' | translate}}
                    <clr-dg-pagination #pagination [clrDgPageSize]="15"></clr-dg-pagination>
                </clr-dg-footer>
            </clr-datagrid>
        </div>
    </div>
    <confirmation-dialog #confirmationDialog (confirmAction)="confirmDeletion($event)"></confirmation-dialog>
</div>

